<template>
  <div class="my-position">
    <div class="my-position-item">经度:{{ positioinData.lng }}</div>
    <div class="my-position-item">纬度:{{ positioinData.lat }}</div>
    <div class="my-position-item">高度:{{ positioinData.height }}</div>
  </div>
</template>
<script setup>
import { screenPositionToCartesian3, cartesian3ToLng } from '@/utils/index';
import { useLineData, watchLineData } from '@/store';
import { onMounted } from 'vue';
import PositionInfoStatusBar from '@/cesiumTools/positionStatusBar';
import { ref } from 'vue';
// const lineDataStore=useLineData()
let positioinData = ref({
  lng: 116.397428,
  lat: 39.90816,
  height: 100,
});
onMounted(async () => {
  const viewer = await watchLineData('setViewer');
  // console.log(viewer,111);
  // 创建屏幕空间事件，监听鼠标移动
  let eventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  eventHandler.setInputAction((e) => {
    const { startPosition } = e;
    // 屏幕坐标转笛卡尔3
    // console.log(this.viewer.scene.globe.ellipsoid)
    const cartesian = screenPositionToCartesian3(viewer, startPosition);
    // 屏幕坐标可能转笛卡尔的时候会是undefined
    // console.log(cartesian)
    if (cartesian) {
      // 笛卡尔3转经纬度
      const { lng, lat, height } = cartesian3ToLng(cartesian, viewer);
      positioinData.value.lng = lng.toFixed(4);
      positioinData.value.lat = lat.toFixed(4);
      positioinData.value.height = height.toFixed(2);
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  // positionStatus = new PositionInfoStatusBar(viewer);
});
</script>
<style scoped>
.my-position {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: #111;
  border: 1px solid #fff;
}
.my-position-item {
  color: #fff;
  font-size: 14px;
  padding: 5px;
  width: 150px;
  border: 1px solid #fff;
}
</style>
